<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div.box {
			width: 100px;
			height: 100px;
			border: 1px solid #000;
		}
	</style>
</head>

<body>
	<!-- DOM -->
	<button id="btn">按钮</button>
	box-move
	<div class="box" id="box">
		BOX
	</div>

	<script>

		/* DOM */
		/* 触发 */
		let btn = document.getElementById('btn')
		/* 目标dom */
		let box = document.getElementById('box')


		let display = false;

		btn.onclick = () => {
			/* 修改属性 */
			display = !display
			/* 渲染dom */
			render()
		}
		console.log(!display);

		// let result = 'none'
		/* 这个函数用来渲染dom的，根据属性去渲染 */
		function render() {
			let result = 'none'
			if (display) {
				result = 'block'
			} else {
				result = 'none'
			}
			box.style.display = result
			// box.style.display = display ? 'block' : 'none';
		}
		render()
	</script>

</body>

</html>